<template>
    <div>
        <div class="c-title-5">
            <div class="r-table r-header">
                <div class="r-coll c-type">
                    <span class="t-mr t-ml">
                        <!-- # -->
                        {{ $t("message.New.a") }}
                    </span>
                    <Sort :sort="HotSort[0]" :call-fun="sortc.onDown.bind(sortc)"></Sort
                    ><span class="t-ml ml-7">
                        <!-- 币种 -->
                        {{ $t("message.New.b") }}
                    </span>
                </div>
                <div class="r-coll c-time">
                    <!-- 時間 -->
                    {{ $t("message.New.c") }}
                </div>
                <div class="r-coll c-news">
                    <!-- 最新价 -->
                    {{ $t("message.New.d") }}
                </div>
                <div class="r-coll c-wave">
                    <span class="t-mr">
                        <!-- 漲跌幅 -->
                        {{ $t("message.New.e") }}
                    </span>
                    <Sort :sort="HotSort[1]" :call-fun="sortc.onDown.bind(sortc)"></Sort>
                </div>
                <div class="r-coll c-total_ c-title-5">
                    <!-- 24H交易量 -->
                    {{ $t("message.New.ee") }}
                </div>
                <div class="r-coll c-total">
                    <!-- 24H交易量 -->
                    {{ $t("message.New.f") }}
                </div>
                <div class="r-coll c-account">
                    <span class="t-mr">
                        <!-- 24H成交额 -->
                        {{ $t("message.New.g") }}
                    </span>
                    <Sort :sort="HotSort[2]" :call-fun="sortc.onDown.bind(sortc)"></Sort>
                </div>

                <!-- 操作 -->
                <!-- <div class="r-coll c-do">
                    {{ $t('message.New.h') }}
                </div> -->
            </div>
            <div class="r-table r-body c-title-3" v-for="(item, i) in filterAry" :key="i">
                <div class="r-coll c-type">
                    <div class="r-num">{{ (curPage - 1) * pageSize + i + 1 }}</div>
                    <img class="rc-img" :src="tokens.getImg(item.s)" />
                    <!-- <div class="r-wd">{{ item.s }}</div> -->
                    <div class="r-wd" @click="onJump(item)">
                        {{ commFun.getForm(true, item.s) }}
                        <span style="color: var(--color)">/ {{ commFun.getForm(false, item.s) }}</span>
                    </div>
                </div>
                <div class="r-coll c-time">{{ formatTimestamp(item.O).split(" ")[0] }}</div>
                <div class="r-coll c-news">{{ item.c }}</div>
                <!-- <div class="r-coll c-wave c-color1">{{ item.p }}%</div> -->
                <div v-if="item.p > 0" class="r-coll c-wave c-color1">{{ formatBigNumber((item.p / item.c) * 100) }}%</div>
                <div v-else class="r-coll c-wave c-color2">{{ formatBigNumber((item.p / item.c) * 100) }}%</div>
                <div class="r-coll c-total">{{ formatBigNumber(item.v) }}</div>
                <div class="r-coll c-account">{{ formatBigNumber(item.q) }}</div>
                <!-- <div class="r-coll c-do c-color">
                    {{ $t('message.New.i') }}
                </div> -->
            </div>
            <Empty v-if="list.length === 0"></Empty>
        </div>
        <JPage class="my-4" :length="totalPage" :model-value="curPage" @update:modelValue="onPage" :total-visible="3"></JPage>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive } from "vue";
import BankIcon from "@/assets/bank.png";
import Sort from "@/components/j-sort/index.vue";
import JPage from "@/components/j-page/index.vue";
import Empty from "@/components/j-empty/index.vue";
import { useRank } from "@/stores/rank";
import { formatTimestamp, formatBigNumber } from "@/comm/format";
import { PAGE_SIZE } from "../base";
import { commFun } from "../script/comm";
import { sortList } from "@/comm/tooler";
import { Sort as SortC, SortEnum } from "@/comm/sort";
import { useTokens } from "@/stores/tokens";
const tokens = useTokens();
const sorts = ref([
    {
        key: 0,
        val: SortEnum.NONE
    },
    {
        key: 1,
        val: SortEnum.NONE
    },
    {
        key: 2,
        val: SortEnum.NONE
    }
]);
const sortc = new SortC(sorts);
const HotSort = sortc.sort;
sortc.callFun = function (item) {
    // console.log("yzt_点击了new", item);
    sort.name = 0;
    sort.add = 0;
    sort.turn = 0;
    if (item.key == 0) {
        sort.name = item.val;
    }
    if (item.key == 1) {
        sort.add = item.val;
    }
    if (item.key == 2) {
        sort.turn = item.val;
    }
};

const rank = useRank();
const curPage = ref(1);
const pageSize = ref(PAGE_SIZE);

const totalPage = computed(() => {
    if (!rank.NEW) return 0;
    return Math.ceil(rank.NEW.length / pageSize.value);
});

const onPage = (v: number) => {
    curPage.value = v;
    console.log(v);
};

const onJump = (item: any) => {
    console.log(item);
    // localStorage.setItem("kline", item.s);
    location.href = "/coin/" + item.s;
};

const list = computed(() => {
    if (!rank.NEW) return [];
    const ary = rank.NEW.slice((curPage.value - 1) * pageSize.value, curPage.value * pageSize.value);
    // console.log(ary);
    return ary;
});

const sort = reactive({
    name: 0,
    add: 0,
    turn: 0
});
const filterAry = computed(() => {
    var ary = [...list.value];
    if (sort.name !== 0) {
        sortList(ary, "s", sort.name == 2);
    }
    if (sort.add !== 0) {
        sortList(ary, "P", sort.add == 2);
    }
    if (sort.turn !== 0) {
        sortList(ary, "q", sort.turn == 2);
    }
    return ary;
});

const onCoinType = (val: any) => {
    console.log("type", val);
    sort.add = 0;
    sort.turn = 0;
    sort.name = val;
};
const onVar = (val: any) => {
    console.log("var", val);
    sort.add = val;
    sort.turn = 0;
    sort.name = 0;
};
const onAccount = (val: any) => {
    console.log("account", val);
    sort.add = 0;
    sort.turn = val;
    sort.name = 0;
};
</script>

<style lang="less" scoped>
@import url("../base.less");
</style>
